<template>
  <div class="main">
    <div class="body">
      <el-card class="box-card search-box-card" :class="{'hideBox':!searchShow}">
        <div slot="header" class="clearfix" style="position:relative">
          <i class="el-icon-search"></i>
          <span>查询条件</span>
          <el-tooltip class="item" effect="dark" content="点我收起" placement="right-start">
            <i class="el-icon-arrow-down" v-show="searchShow" @click="searchShow=!searchShow" style="position: absolute;right: 0;color:#409EFF;top:3px;cursor:pointer;"></i>
          </el-tooltip>
          <el-tooltip class="item" effect="dark" content="点我展开" placement="right-start">
            <i class="el-icon-arrow-right" v-show="!searchShow" @click="searchShow=!searchShow" style="position: absolute;right: 0;color:#409EFF;top:3px;cursor:pointer;"></i>
          </el-tooltip>
        </div>
        <transition name="custom-classes-transition" enter-active-class="animated fadeInDown" leave-active-class="animated fadeOutUp">
          <search @handle-search="searchSubmit" v-show="searchShow"></search>
        </transition>
      </el-card>
    </div>
    <div class="body">
      <el-card class="box-card text-align-center">
        <financing-table :data-loading="loading" :data-table="tableData5" :query="query" @refresh="handleRefresh"></financing-table>
        <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :page-sizes="pageSizesArr"
      :page-size="psize"
      :current-page.sync="currentPage"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
      </el-card>
    </div>
  </div>
</template>
<style scope>
.text-align-center {
  text-align: center;
}
</style>

<script>
import FinancingTable from '@/components/suplier/arApi/financingbill/FinancingbillTable'
import Search from '@/components/suplier/arApi/financingbill/FinancingbillSearch'
import Table from '@/mixins/suplier/Ar/Table'
export default {
  // name: 'loanPage', // 我的待办
  mixins: [Table],
  props: ['query'],
  data () {
    return {
      loading: false,
      postUrl: '/multiArInFinancingManager/getInFinancingListTable.do',
      dataStr: 'data',
      totalStr: 'recordsTotal',
      checkStatus: null
    }
  },
  components: {
    'financing-table': FinancingTable,
    'search': Search
  },
  async mounted () {
    console.log(this.$route.query.checkedStatus)
    const _this = this
    // 获取url中参数
    this.param.interfaceTransSerial = this.query.interfaceTransSerial
    this.param.checkedStatus = this.$route.query.checkedStatus ? this.$route.query.checkedStatus : '' // 判断是否是有参数传递
    if (this.query.interfaceTransSerial) {
      // 模拟登陆
      await this.monitorLogin(this.query.interfaceTransSerial)
    }
    this.getdata(1, this.psize)
      .then(function (response) {
        console.log(response)
        if (response) {
          _this.tableData5 = response.data[_this.dataStr]
          _this.total = response.data[_this.totalStr]
        }
      })
      .catch(function (error) {
        console.log(error)
      })
  },
  methods: {
    // 查询
    searchSubmit (val) {
      let billPayDatefrom = val.billPayDate && val.billPayDate[0] ? val.billPayDate[0].Format('yyyy-MM-dd') : ''
      let billPayDateto = val.billPayDate && val.billPayDate[1] ? val.billPayDate[1].Format('yyyy-MM-dd') : ''
      /* 修改请求参数 */
      try {
        Object.assign(this.param, {
          checkedStatus: val.checkedStatus,
          billBookCurr: val.billBookCurr,
          masterChainId: val.masterChainId,
          custToName: val.custToName,
          invoiceNo: val.invoiceNo,
          billId: val.billId,
          from: billPayDatefrom,
          to: billPayDateto,
          transSerialNo: val.transSerialNo // 交易流水号
        })
      } catch (error) {
        console.log(error)
      }
      this.startSearch()
    },
    // 刷新
    handleRefresh () {
      const that = this
      this.getdata(that.currentPage, that.psize)
        .then(res => {
          if (res) {
            this.tableData5 = res.data[this.dataStr]
            this.total = res.data[this.totalStr]
          }
        })
        .catch(function (error) {
          console.log(error)
        })
    }
  }
}
</script>
